<template>
    <div class="bd">

        <div class="news_banner">
            <img src="../assets/banner.jpg">
        </div>

        <div id="artical">
            <el-row class="pro_bd" :gutter="24" style="margin-bottom:0">
                <el-col :span="6" class="left">
                    <div class="grid-content">
                        <ul>
                            <li v-bind:class="{'back_active':cont.cid==sort.id}" v-for="(sort,val) in left" :key="sort.side" @click="active($event,val)" :id="sort.id">
                                <router-link :to="{name:'news',params:{cid:sort.id}}">{{sort.title}}</router-link>
                            </li>
                        </ul>
                        
                        <div style="display:none" ref="cid">{{$route.params.cid}}</div>
                    </div>
                </el-col>
                <el-col :span="18">
                    <article class="artical_cont right">
                        <div v-title>{{cont.title}}</div>
                        <h3 class="artical_tle">{{cont.title}}</h3>
                        <p class="artical_sub">
                            <span class="author">{{cont.author_name}}</span>
                            <span class="ctime">{{cont.ctime}}</span>
                            <div v-html="cont.content" class="txt"></div>
                            <p style="display:none" ref="hide">{{$route.params.id}}</p>
                    </article>
                    <!-- <div class="images" v-viewer>
                            <img src="../assets/banner.jpg">
                            <img src="../assets/shuijiao.jpg">
                        </div> -->
                    <div class="chemical" v-if="question!=''">
                        <div id="commentBox">
                            <div v-for="list in question" :key="list.comments">
                                <!-- 说 -->
                                <div class="comment" :class="{'line_bt':list.anwser_list==undefined}">
                                    <div class="avtar">
                                        <img :src="list.avatar" width="36" height="36" class="avtar_img">
                                        <img src="../assets/shuo.png" class="talk">
                                    </div>
                                    <div class="comment-content">
                                        <p class="avtar-name">
                                            <span>{{list.username}}</span>
                                        </p>
                                        <div class="comments">
                                            <viewer :images="coment_img">
                                                <img :src="coment_img" :key="coment_img" v-for="(coment_img,index) in list.pics" @click="img(coment_img,$event)" ref="imgs">
                                            </viewer>
                                            <p class="comments_bd">{{list.title}}</p>
                                            <!-- <p>{{this.coment_img}}</p> -->
                                        </div>

                                        <p class="comment-time">
                                            <span>{{list.ctime}}</span> ·
                                            <span class="join_talk" v-if="list.anwser_list==undefined">加入讨论</span>
                                            <span class="join_talk" v-if="list.comment_total!=0" :class="{'check_talk':list.comment_total!=0}" @click="check_talk(list.id)">{{list.comment_total}}讨论</span>
                                        </p>
                                    </div>
                                </div>
                                <!-- 说 结束 -->
                            </div>
                        </div>
                        <div class="check_more" @click="more()" :class="{'disabled':nomore}" ref="more">查看更多</div>
                    </div>
                    <div v-else style="height:40px;padding:10px;line-height: 40px;font-size:20px;color:#5a5a5a;background:#fff;margin-top:20px;box-shadow:0px 0px 6px 0px #d8d8d8">暂无讨论</div>
                </el-col>

            </el-row>

        </div>
        <div id="model" v-if="showModel">
            <div tabindex="-1" class="el-message-box__wrapper" style="z-index: 2051;">
                <div class="el-message-box">
                    <div class="el-message-box__header">
                        <div class="el-message-box__title">查看讨论</div>
                        <button type="button" aria-label="Close" class="el-message-box__headerbtn" @click="close">
                            <i class="el-message-box__close el-icon-close"></i>
                        </button>
                    </div>
                    <div class="el-message-box__content">
                        <div class="replay">
                            <div v-for="(anwser,key) in anwsers.data" :key="anwser.items" class="replay_item">
                                <div class="comment">
                                    <div class="avtar">
                                        <img :src="anwser.useravatar" width="36" height="36" class="avtar_img">
                                        <img src="../assets/talk.png" class="talk">
                                    </div>
                                    <div class="comment-content">
                                        <p class="avtar-name">
                                            <span>{{anwser.username}}</span>
                                        </p>
                                        <div class="comments">
                                            <viewer :images="coment_img" class="img">
                                                <img :src="coment_img" :key="coment_img" v-for="(coment_img,index) in anwser.pics" @click="img(coment_img,$event)" ref="imgs">
                                            </viewer>
                                            <p class="comments_bd">{{anwser.content}}</p>
                                        </div>

                                        <p class="comment-time">
                                            <span>{{anwser.ctime}}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- 论 分页 开始-->
                            <!-- v-if="list.anwser_list.length>=3" -->
                            <div class="lunPage" v-if="anwsers.total>=3">
                                <!-- <p>{{anwser.id}}</p> -->
                                <el-pagination small @current-change="pageIndexChange" :page-size="4" :current-page="current_page" layout="prev, pager, next" :total="anwsers.total" :data-number="nextPage.total">
                                </el-pagination>
                            </div>

                            <!-- 论 分页 结束-->
                        </div>
                        <!-- </div> -->
                    </div>

                </div>
            </div>
        </div>

        <div class="v-modal" :class="{'showmodel':showModel,'hideModel':!showModel}" style="z-index: 2050;"></div>   
    </div>
</template>

<script>
var page = 1;
export default {
    directives: {
        title: {
            componentUpdated: function(el, binding) {
                document.title = el.innerText
                el.remove();
                // console.log('02')
            }
        }
    },
    data() {
        return {
            cont: [],
            id: '',
            left: [],
            loading: true,
            cid_focus: 0,
            page: 1,
            current_page: 1,
            question: [],
            anwser_list: [],
            nomore: false,
            nextPage: [],
            showModel: false,
            anwsers: [],
            coment_img: [],
            com_id:localStorage.getItem("companyid"),
        }
    },
    mounted() {
        var self=this;
        setTimeout(function(){
            var com_id=localStorage.getItem("companyid");
            self.com_id=com_id;
            self.loadLeftside();
        },300)
       
        
        //this.loadartical(); 
        this.loadQuestion();
        this.id = this.$refs.hide.innerHTML;
    },
    methods: {
        loadQuestion: function() {
            var id = this.$refs.hide.innerHTML;
            var page = this.current_page;
            this.$http.get('http://thy.588net.com/index.php/question/Question/getPostList?' + '&article_id=' + id + '&page_size=' + 3 + '&page=' + page).then(function(res) {
                var question = res.body.data;
                this.question = res.body.data;
            })
        },
        loadartical: function() {
            window.scrollTo(0, 0);
            var id = this.$refs.hide.innerHTML;
            var cid_focus = this.$refs.cid.innerHTML;
            this.cid_focus = this.$refs.cid.innerHTML;
            this.$http.get('http://thy.588net.com/index.php/article/Article/get_info?' + '&id=' + id).then(function(res) {
                this.cont = res.body.data.article;
                //console.log(this.cont)
                // console.log('loadartile')
            })
        },
        loadLeftside() {
            var cid = this.$refs.cid.innerHTML;
            this.$http.get('http://thy.588net.com/index.php/article/article/get_article_cate?'+ 'company_id=' + this.com_id).then(function(res) {
                this.left = res.body.data;
            })
        },
        loadAnwser: function(q_id, val) {
            this.q_id = q_id;
            var page = 1;
            //查看讨论 点击
            if (val == undefined) {
                this.$http.get('http://thy.588net.com/index.php/question/question_answer/getAnswerList?' + '&company_id=' + this.com_id + '&page_size=' + 4 + '&page=' + page + '&id=' + q_id + '&is_web=' + 1).then(function(res) {
                    //console.log(res.body.data) 
                    this.anwsers = res.body.data;
                });
            } else {
                //切换page
                this.$http.get('http://thy.588net.com/index.php/question/question_answer/getAnswerList?' + '&company_id=' + this.com_id + '&page_size=' + 4 + '&page=' + val + '&id=' + q_id + '&is_web=' + 1).then(function(res) {
                    //console.log(res.body.data) 
                    this.anwsers = res.body.data;
                });
            }

        },
        more: function() {
            page++;
            var id = this.$refs.hide.innerHTML;
            this.$http.get('http://thy.588net.com/index.php/question/Question/getPostList?' + '&product_id=' + id + '&page_size=' + 3 + '&page=' + page).then(function(res) {
                if (res.body.data.length == 0) {
                    //alert('空')
                    this.nomore = true;
                    this.$refs.more.innerHTML = '已无更多讨论'
                    return false
                } else {
                    //alert('不空')
                    var questions = res.body.data;
                    this.question = this.question.concat(questions);
                }
            })
        },
        pageIndexChange: function(val) {
            this.current_page = val;
            this.loadAnwser(this.q_id, val)
        },
        check_talk: function(q_id) {
            this.showModel = true;
            this.loadAnwser(q_id)
            // console.log(this.coment_img)
        },
        close: function() {
            this.showModel = false
        },
        img: function(img, event) {
            this.pics = (img.replace("/thumb/", "/"));
            event.currentTarget.src = this.pics;
            var sb = this.$refs.imgs;


            //console.log(this.$refs.imgs[0].src)
            // sb.forEach(function(m,i){
            // var ss=m.src.replace("/thumb/","/");
            // })
            //alert(this.$refs.imgs[0])
            //console.log(event.currentTarget.src);
            //console.log(event.target);
        },
        active(event, val, id) {
            this.id = id;
        }
    },
    activated: function() {
       $(".is-active").removeClass("is-active");
        $(".company_news").addClass("is-active");
        this.id = this.$refs.hide.innerHTML;
        this.loadartical();
        this.loadQuestion();
        this.loadLeftside();
    },
    beforeRouteLeave(to, from, next) {

        console.log("我离开了")

        next();
    }
}

</script>

<style>
.left_active {
    background: #2277ff;
    color: #fff!important;
}

.txt p {
    width: 100%;
    line-height: 28px;
    font-size: 16px;
    color: #5a5a5a
}

.txt p img {
    display: block;
    height: auto!important;
    max-width: 100%!important;
    margin: 20px auto!important;
}
</style>


<style scoped>
.chemical {
    background: #fff;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0px 0px 6px 0px #d8d8d8;
}

.comments img {
    width: 80px;
    height: 80px;
    padding: 4px;
    margin-right: 10px;
    box-shadow: 0px 0px 2px 0px #d8d8d8 inset;
}

.hideModel {
    display: none
}

.showmodel {
    display: block
}

.el-message-box {
    width: 700px;
    height: 600px;
    overflow: auto;
}

.check_talk {
    cursor: pointer
}

.disabled {
    color: #e4e4e4!important;
    background-color: #fff;
    cursor: not-allowed!important;
}

.comment-time .join_talk {
    display: none;
}

.comment-time .join_talk:last-of-type {
    display: inline-block
}

.lunPage {

    text-align: center
}

.lunPage .el-pagination {
    white-space: nowrap;
    padding: 14.5px 0;
    color: #48576a;
}

.lunPage.active {
    border-color: none;
    background-color: #f5f5f5!important;
    border-radius: 100%!important;
    color: #2277ff;
    cursor: default;
    font-weight: bolder;
}

.el-pager li.active {
    border-color: none;
    background-color: #f5f5f5!important;
    border-radius: 100%!important;
    color: #2277ff;
    cursor: default;
    font-weight: bolder;
}

.replay .replay_item {
    border-bottom: 1px solid #d8d8d8
}

.replay .replay_item:last-of-type {
    border-bottom: 0px solid #fff
}

.check_more {
    height: 50px;
    line-height: 50px;
    background: #fff;
    text-align: center;
    color: #5a5a5a;
    border: 1px solid #d8d8d8;
    cursor: pointer;
    margin-top: 15px;
    /* width:100%; */
    /* position: absolute; */
    z-index: 9999;
}

li a {
    display: block;
    color: #5a5a5a;
}

.replay {
    clear: both;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
}



.replay .comment {
    padding: 15px;
    border-top: 0px solid #d8d8d8;
}

.back_active {
    background: #2277ff;
    color: #fff!important
}

.back_active a {
    color: #fff
}

li a {
    display: block;
    color: #5a5a5a;
}

.join_talk {
    background: #f5f5f5;
    border-radius: 8px;
    display: inline-block;
    height: ;
    padding: 0px 10px;
    color: #5a5a5a
}

.comments_bd {
    height: 30px;
    line-height: 30px;
    clear: both
}

.comments img:nth-of-type(3n) {
    margin-right: 0;
}

.avtar {
    margin-right: 10px;
    width: 36px
}

.comment {
    /* border-top: 1px solid #d8d8d8; */
    color: #5a5a5a;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    padding: 10px;
}

.avtar_img {
    width: 36px;
    height: 36px;
    border-radius: 18px;
}

.talk {
    width: 20px;
    height: 20px;
    float: right;
}

.comment-content {
    width: 100%;
}

.avtar-name {
    height: 36px;
    line-height: 36px;
    font-size: 12px;

    overflow: hidden;
    color: #5a5a5a;
}

.avtar-name span:nth-of-type(1) {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.comments {
    text-align: justify;
    font-size: 14px;
    line-height: 24px;
    color: #5A5A5A;
    overflow: hidden;
}



.comment-time {
    font-size: 12px;
    color: gray;
    margin-top: 6px;
    height: 1rem;
    line-height: 20px;
}

.bd {
    background: #f5f5f5
}

.right {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 6px 0px #d8d8d8;
}

.author {
    margin-right: 10px
}

.artical_sub {
    color: #a5a5a5!important;
    font-size: 14px;
    height: 40px;
    text-align: center
}

#artical {
    max-width: 1200px;
    margin: 24px auto;
    margin-bottom: 0
}

.artical_tle {
    text-align: center;
    padding: 20px 0;
    color: #5a5a5a;
    font-size: 24px
}

.news_banner {
    max-width: 1200px;
    height: 250px;
    margin: 0 auto;
    overflow: hidden;
}

.news_banner img {
    width: 100%;
    height: 250px
}

.artical_cont p img {
    height: auto;
    max-width: 300px;
    margin: 50px auto;
}


.artical_cont h2,
.artical_cont h4 {
    line-height: 1.2;
    padding: 0;
    margin-bottom: 15px;
    color: #070505;
}

.artical_cont p {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
    color: #3c3d3d;
    font-size: 16px;
    line-height: 160%;
    word-break: break-all;
}

.left .grid-content {
    box-shadow: 0px 0px 6px 0px #d8d8d8;
}

.left ul {
    background: #fff;
}

.left ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #5a5a5a;
    cursor: pointer;
    list-style: none;
}

.left_active {
    background: #2277ff;
    color: #fff!important;
}

.left_active a {
    color: #fff
}
</style>
